<template>
  <!-- 
  <img src="../assets/img/zhuanti.jpg" alt />-->
  <div class="index">
    <div v-if="is">
      <div>
        <shounav :routernav="routernav" />
      </div>
      <div class="shangjiamian">
        <div class="clear">
          <div class="shangjiamiannavleft">
            <div>排序 :</div>
            <div @click="pai(2)" :class="{active:paixiu==2}">销量</div>
            <div @click="pai(0)" :class="{active:paixiu==0}">价格</div>
            <div @click="pai(1)" :class="{active:paixiu==1}">评分最高</div>
          </div>
          <div class="shangjiamiannavright">
            <div>筛选 :</div>
            <div @click="shai(0)" :class="{active:quanguo==1}">全国</div>
            <div @click="shai(1)" :class="{active:cirida==1}">次日达</div>
          </div>
        </div>
        <div class="shangjiabottom">
          <indexmaincoll
            v-for="(itme,index) in shangjiabottom"
            :key="itme.id"
            v-show="index<8*danqian&&index>=8*(danqian-1)"
            class="shangjiabottomcoll"
            :zi="itme.name"
            :guige="itme.xiushici"
            :jiage="itme.tejia"
            :url="require('../assets/img/'+itme.imgurl)"
            :yuanjia="itme.danjia"
            :itmeid="itme.id"
          />
          <div class="fenyeqi">
            <fenyeqi @danqainye="danqainye($event)" :zong="Math.ceil(shangjiabottom.length/8)" />
          </div>
        </div>
      </div>
    </div>
    <div class="kong" v-else>
      <div>
        <i class="iconfont icon-sousuo"></i>
      </div>
      <div>抱歉，暂无查到您要的商品</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import indexmaincoll from "@/components/indexmaincoll.vue";
import fenyeqi from "@/components/fenyeqi.vue";
import shounav from "@/components/nav.vue";
import "@/assets/font/iconfont.css";
import axios from "axios";
export default {
  data() {
    return {
      paixiu:2,
      cirida: 0,
      quanguo:0,
      is: false,
      danqian: 1,
      routernav: [
        { zi: "首页", to: "/index/indexshouye" },
        { zi: "搜索", to: "" },
        { zi: this.$store.state.sousuozi || "未知", to: "" }
      ],
      shangjiabottom: [
        {
          id: 1,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-16.png",
          danjia: "'40.00'"
        },
        {
          id: 2,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-15.png",
          danjia: "'40.00'"
        },
        {
          id: 3,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-14.png",
          danjia: "'40.00'"
        },
        {
          id: 4,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-13.png",
          danjia: "'40.00'"
        },
        {
          id: 5,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-13.png",
          danjia: "'40.00'"
        },
        {
          id: 6,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-13.png",
          danjia: "'40.00'"
        },
        {
          id: 7,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-16.png",
          danjia: "'40.00'"
        },
        {
          id: 8,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-16.png",
          danjia: "'40.00'"
        },
        {
          id: 9,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-15.png",
          danjia: "'40.00'"
        },
        {
          id: 10,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-16.png",
          danjia: "'40.00'"
        }
      ]
    };
  },
  components: {
    indexmaincoll,
    fenyeqi,
    shounav
  },
  methods: {
    danqainye(e) {
      this.danqian = e;
    },
    pai(e){
      this.paixiu = e;
            var _this = this;
      var url = this.$store.state.url;
      axios.post(url + "suosuo", { id: _this.sousuozi,paixiu:e,quanguois:_this.quanguo,ciridaois:_this.cirida }).then(
        res => {
          // 成功回调
          if (res.data) {
            window.console.log(res.data.data);
            _this.shangjiabottom = res.data.data;
            _this.is = true;
          }
        },
        res => {
          window.console.log(res);
          // 错误回调
        }
      );
    },
    shai(e) {
      if(e){
        if(this.cirida){
          this.cirida = 0;
        }else{
          this.cirida = 1;
        }
      }else{
        if(this.quanguo){
          this.quanguo = 0;
        }else{
          this.quanguo = 1;
        }
      }
      var _this = this;
      var url = this.$store.state.url;
      axios.post(url + "suosuo", { id: _this.sousuozi,pingjia:_this.paixiu,quanguois:_this.quanguo,ciridaois:_this.cirida }).then(
        res => {
          // 成功回调
          if (res.data) {
            window.console.log(res.data.data);
            _this.shangjiabottom = res.data.data;
            _this.is = true;
          }
        },
        res => {
          window.console.log(res);
          // 错误回调
        }
      );
    }
  },
  computed: {
    sousuozi() {
      return this.$store.state.sousuozi;
    }
  },
  watch: {
    shangjiabottom(val){
      this.$store.commit('zongye', val.length)
    },
    sousuozi(e) {
      var _this = this;
      var url = this.$store.state.url;
      axios.post(url + "suosuo", { id: e }).then(
        res => {
          // 成功回调
          if (res.data) {
            window.console.log(res.data.data);
            _this.shangjiabottom = res.data.data;
            _this.is = true;
          }
        },
        res => {
          window.console.log(res);
          // 错误回调
        }
      );
      this.routernav = [
        { zi: "首页", to: "/index" },
        { zi: "搜索", to: "" },
        { zi: this.$store.state.sousuozi || "未知", to: "" }
      ];
    }
  },
  mounted() {
    var _this = this;
    var url = this.$store.state.url;
    axios.post(url + "suosuo", { id: this.$store.state.sousuozi }).then(
      res => {
        // 成功回调
        if (res.data) {
          window.console.log(res.data);
          _this.shangjiabottom = res.data.data;
          this.$store.commit('zongye', res.data.data.length)
          _this.is = true;
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );
    this.routernav = [
      { zi: "首页", to: "/index" },
      { zi: "搜索", to: "" },
      { zi: this.$store.state.sousuozi || "未知", to: "" }
    ];
  }
};
</script>
<style scoped>
.guding {
  width: 100%;
  position: fixed;
  top: 0px;
  background-color: #fff;
  z-index: 11;
}

.shangjiamian {
  width: 80%;
  margin: 0px auto;
}
.shangjiamiannavleft {
  float: left;
}
.shangjiamiannavright {
  float: right;
}
.shangjiamiannavleft div,
.shangjiamiannavright div {
  padding: 0.2rem 0.5rem;
  float: left;
  border: 1px solid #ccc;
  margin: 0.5rem 1rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.shangjiamiannavright div {
  border: none;
  background-color: #dedede;
}
.shangjiamiannavleft div:nth-child(1),
.shangjiamiannavright div:nth-child(1) {
  margin-left: 0px;
  padding-left: 0px;
  border: none;
  background-color: #fff;
}
.shangjiamiannavright div:last-of-type {
  margin-right: 0px;
}
.shangjiamiannavleft div.active {
  border: 1px solid #498e3d;
  color: #498e3d;
}
.shangjiamiannavright div.active {
  background-color: #498e3d;
  color: #fff;
}

.shangjiabottom {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0px;
}
.shangjiabottomcoll {
  box-sizing: border-box;
  margin-right: 1.33%;
  margin-bottom: 1rem;
}
.shangjiabottomcoll:nth-child(4n) {
  margin-right: 0px;
}
.fenyeqi {
  width: 100%;
  display: flex;
  justify-content: center;
}

.kong {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #f08200;
  font-size: 2rem;
  padding: 6rem 0px;
}
.kong .iconfont {
  font-size: 4rem;
  line-height: 6rem;
}
</style>